<template>
  <div class="home-box">
    <div class="home-content">
      <el-popover placement="right" :width="400" trigger="click" transition="">
        <template #reference
          ><div class="set-icon">
            <el-icon><Tools /></el-icon></div
        ></template>
        <div class="set-content">
          <div class="info-box">
            <div class="title">通用设置</div>
            <div class="form-box info-form">
              <div class="form-item">
                <div class="label">额外积分---是否显示</div>
                <div class="value">
                  <CheckBox :value="setData.info.hasScore" :callback="changeSetScore"></CheckBox>
                </div>
              </div>
              <div class="form-item">
                <div class="label">额外积分---单次计算数值</div>
                <div class="value">
                  <el-input v-model="setData.info.scoreNum" placeholder="请输入内容" />
                </div>
              </div>
              <div class="form-item">
                <div class="label">额外积分---名称修改</div>
                <div class="value">
                  <el-input v-model="setData.info.scoreName" placeholder="请输入内容" />
                </div>
              </div>

              <div class="form-item">
                <div class="label">结账/导出---是否导出文件</div>
                <div class="value">
                  <CheckBox :value="setData.info.hasExport" :callback="changeSetExport"></CheckBox>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="export-box">
            <div class="title">基础设置</div>
          </div> -->
        </div>
      </el-popover>
      <div class="logo-box">
        <img class="logo" src="/images/logo.png" alt="" />
        <div class="name">米门在线分组器1.0</div>
      </div>
      <div class="person-box">
        <div class="left-box">
          <div class="title">待分组（共: {{ persons.length }}个）</div>
          <div class="person-list">
            <div class="person-item" v-for="(item, index) in persons" :key="index">
              <div class="name">{{ item.name }}</div>

              <div class="score-icon">
                <div class="score" v-if="setData.info.hasScore">{{ item.score }}</div>
                <div class="icon" @click="deletePerson(index)">
                  <el-icon><DeleteFilled /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center-box">
          <div class="status-box">
            <span class="status" :style="statusStyle">({{ statusText }})</span>
          </div>
          <div class="money-box">
            <div class="label">输赢积分:</div>
            <el-input v-model="money" placeholder="请输入金额" />
          </div>
          <el-button class="button" type="primary" @click="addPerson">添加人员</el-button>
          <el-button class="button" type="primary" @click="emptyPerson">清空人员</el-button>
          <el-button class="button" type="primary" @click="grounpFun">进行分组</el-button>
        </div>
        <div class="right-box">
          <div class="title">最佳支付方案</div>
          <div class="money-list">
            <div class="money-item" v-for="(item, index) in payLists" :key="index">
              <div class="name">
                <span class="failName">{{ item.failName }}</span>
                <span class="text">给</span>
                <span class="winName">{{ item.winName }}</span>
                <span class="money">{{ item.money }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="group-box">
        <div class="red-box">
          <div class="group-title">
            <div class="title">
              红队 <span class="sum redSum">{{ redSum }}</span>
            </div>

            <el-popover placement="right" :width="400" trigger="click" transition="">
              <template #reference
                ><div class="num-icon">
                  <el-icon><Edit /></el-icon></div
              ></template>
              <div class="num-content">
                <el-input v-model="editRedSum" type="text" placeholder="请输入内容" @change="(val) => changeSum(val, 'red')"></el-input>
              </div>
            </el-popover>
          </div>
          <div class="person-list">
            <div class="person-item" v-for="(item, index) in redPersons" :key="index">
              <div class="name">{{ item.name }}</div>
              <div class="score-icon" v-if="setData.info.hasScore">
                <div class="score">{{ item.score }}</div>

                <div class="icon cut" @click="cutPersonScore(item, index, 'red')">
                  <el-icon><RemoveFilled /></el-icon>
                </div>
                <div class="icon" @click="addPersonScore(item, index, 'red')">
                  <el-icon><CirclePlusFilled /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <el-button @click="victoryFun('red')" :disabled="status == '0' || status == '2'" class="button" type="primary">胜利</el-button>
        </div>

        <!-- <div class="redBlueIcon">vs</div> -->

        <div class="blue-box">
          <div class="group-title">
            <div class="title">
              蓝队 <span class="sum blueSum">{{ blueSum }}</span>
            </div>
            <el-popover placement="right" :width="400" trigger="click" transition="">
              <template #reference
                ><div class="num-icon">
                  <el-icon><Edit /></el-icon></div
              ></template>
              <div class="num-content">
                <el-input v-model="editBlueSum" type="text" placeholder="请输入内容" @change="(val) => changeSum(val, 'blue')"></el-input>
              </div>
            </el-popover>
          </div>
          <div class="person-list">
            <div class="person-item" v-for="(item, index) in bluePersons" :key="index">
              <div class="name">{{ item.name }}</div>

              <div class="score-icon" v-if="setData.info.hasScore">
                <div class="score">{{ item.score }}</div>
                <div class="icon cut" @click="cutPersonScore(item, index, 'blue')">
                  <el-icon><RemoveFilled /></el-icon>
                </div>
                <div class="icon" @click="addPersonScore(item, index, 'blue')">
                  <el-icon><CirclePlusFilled /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <el-button @click="victoryFun('blue')" :disabled="status == '0' || status == '2'" class="button" type="primary">胜利</el-button>
        </div>

        <div class="blue-box">
          <div class="group-title">总账单</div>
          <div class="person-list">
            <div class="person-item" v-for="(item, index) in persons" :key="index">
              <div class="name">{{ item.name }}</div>
              <div class="money">{{ item.money }}</div>
            </div>
          </div>
          <el-button @click="finish()" :disabled="status == '0' || status == '2'" class="button" type="primary">结账/导出</el-button>
        </div>
      </div>
      <div class="history-box">
        <div class="now-box">
          <div class="title">当前时间:</div>
          <div class="content">{{ now }}</div>
        </div>
        <div class="group-num-box">
          <div class="title">当前分组:</div>
          <div class="content group-num">第{{ groupHistorys.length }}次分组</div>
        </div>
        <div class="group-history-box">
          <div class="title">分组记录:</div>
          <div class="group-history">
            <div class="group-history-item" v-for="(item, index) in groupHistorys" :key="index" @click="getGroupDetail(index)">
              <el-popover placement="right" :width="400" trigger="click" transition="">
                <template #reference>
                  <div class="group-history-item-title-box">
                    <span class="title"> 第{{ index + 1 }}次: {{ item.time }} </span>
                  </div>
                </template>
                <div class="group-history-item-popover">
                  <div class="history-red">
                    <div class="title">
                      红队 <span class="sum redSum">{{ item.redSum }}</span>
                    </div>
                    <div class="person-list">
                      <div class="person-item" v-for="(item2, index2) in item.red" :key="index2">
                        <div class="name">{{ item2.name }}</div>
                        <div class="money">{{ item2.money }}</div>
                        <div class="score">{{ item2.score }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="history-blue">
                    <div class="title">
                      蓝队 <span class="sum blueSum">{{ item.blueSum }}</span>
                    </div>
                    <div class="person-list">
                      <div class="person-item" v-for="(item2, index2) in item.blue" :key="index2">
                        <div class="name">{{ item2.name }}</div>
                        <div class="money">{{ item2.money }}</div>
                        <div class="score">{{ item2.score }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-box" title="作者qq: 1364857150">作者: 米门门主---糯米</div>
  <div class="util-box">
    <el-popover placement="right" :width="400" trigger="click" transition="" :visible="showHistoryPopover">
      <template #reference>
        <div class="util-item" @click="showHistoryPopoverFun">
          <div class="icon history">
            <el-icon><Document /></el-icon>
          </div>
          <div class="text">历史</div>
        </div>
      </template>
      <div class="local-history">
        <div class="history-item" v-for="(item, index) in localHistorys" :key="index" @click="showHistoryDiaoFun(item)">
          <div class="text">
            {{ item.key }}总分组 <span :style="item.statusStyle">({{ item.statusText }})</span>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
  <BaseDialog v-model="personComVisible">
    <template #title>{{ personComStatus === 'add' ? '添加' : '编辑' }}</template>
    <template #buttons>
      <el-button type="info" text bg @click="handlePersonComClose">取消</el-button>
      <el-button type="primary" @click="handlePersonComSubmit">保存</el-button>
    </template>
    <PersonForm ref="personComRef" :data="personComData" :status="personComStatus" />
  </BaseDialog>

  <BaseDialog v-model="historyVisible">
    <template #title>{{ historyTitle }}</template>
    <template #buttons>
      <el-button type="primary" @click="handleHistorySubmit">导入选中分组</el-button>
      <el-button type="info" text bg @click="handleHistoryClose">取消</el-button>
    </template>
    <HistoryCom ref="historyComRef" :data="historyCur" :status="historyStatus" :history-key="historyKey" />
  </BaseDialog>
</template>
<script setup>
import { onMounted, ref, watch, computed } from 'vue'
import { RemoveFilled, CirclePlusFilled, DeleteFilled, Tools, Edit, Document } from '@element-plus/icons-vue'
import PersonForm from '@/components/form/PersonForm.vue'
import HistoryCom from '@/components/tiny/HistoryCom.vue'
import CheckBox from '@/components/tiny/CheckBox.vue'
import { ElMessageBox } from 'element-plus'
import { validateFloatWithTwo } from '@/utils/validate.js'
import { getNowDate } from '@/utils/date.js'
import { setCookie, getCookie } from '@/utils/jsCookie.js'
import { saveAs } from 'file-saver'

const fullscreenLoading = ref(false)

//当前时间
const now = ref(getNowDate())
setInterval(function () {
  now.value = getNowDate()
}, 1000)

//设置功能代码
const defaultSetData = {
  info: {
    hasScore: true,
    scoreName: '额外积分',
    scoreNum: 1,
    hasExport: true
  }
}
const setData = ref()

const lmCookieSetData = getCookie('lmCookieSetData')
setData.value = lmCookieSetData || defaultSetData

const changeSetScore = (val) => {
  setData.value.info.hasScore = val
}

const changeSetExport = (val) => {
  setData.value.info.hasExport = val
}

watch(setData.value, (newV) => {
  setCookie('lmCookieSetData', newV)
})

const persons = ref([])

const money = ref(100)

const groupKey = ref('')

//删除用户
const deletePerson = (index) => {
  if (status.value === 0 || status.value === 2) {
    persons.value.splice(index, 1)
  } else {
    ElMessageBox.alert('请先结账再变更人员,否则会影响账单!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
  }
}

//分组
const groupHistorys = ref([])
const grounpFun = () => {
  let len = persons.value.length
  if (!len || len % 2 != 0) {
    ElMessageBox.alert('人员数量必须是2的倍数!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
    return
  }

  const groups = JSON.parse(JSON.stringify(randomGrouping(persons.value)))
  const hisToryGroups = JSON.parse(JSON.stringify(groups))
  // console.log(groups)
  redPersons.value = groups[0].map((v) => {
    return {
      ...v,
      score: 0
    }
  })
  bluePersons.value = groups[1].map((v) => {
    return {
      ...v,
      score: 0
    }
  })

  groupHistorys.value.push({
    key: getNowDate(),
    time: getNowDate(),
    red: hisToryGroups[0].map((v) => {
      return {
        ...v,
        score: 0
      }
    }),
    blue: hisToryGroups[1].map((v) => {
      return {
        ...v,
        score: 0
      }
    }),
    redSum: 0,
    blueSum: 0
  })

  redSum.value = 0
  blueSum.value = 0

  if (status.value === 0 || status.value === 2) {
    groupKey.value = getNowDate()
  }
  saveHistory(groupKey.value, { status: 1 })

  status.value = 1
}

// 保存用户数据到本地
const saveHistory = (key, other = {}) => {
  let historyCookie = getCookie('mimenHistory')
  if (!historyCookie) {
    setCookie('mimenHistory', [])
    historyCookie = []
  }

  const hasHistory = historyCookie.filter((v) => v.key === key)

  if (hasHistory.length) {
    historyCookie.forEach((v, i) => {
      if (v.key === key) {
        historyCookie[i].data = groupHistorys.value

        if (other) {
          historyCookie[i] = { ...historyCookie[i], ...other }
        }
      }
    })
  } else {
    historyCookie.push({
      key: getNowDate(),
      data: groupHistorys.value,
      ...other
    })
  }

  setCookie('mimenHistory', historyCookie)
}

// 随机分组函数
function randomGrouping(elements) {
  // 根据元素数量生成随机的索引数组
  const randomIndexes = elements.map((_, index) => index).sort(() => Math.random() - 0.5)

  // 计算每组的元素数量
  const groupSize = Math.ceil(elements.length / 2)

  // 将元素根据随机索引划分到两个组中
  const group1 = randomIndexes.slice(0, groupSize).map((index) => elements[index])
  const group2 = randomIndexes.slice(groupSize).map((index) => elements[index])

  return [group1, group2]
}

const moneyHistorys = ref([])

//添加人员组件
const personComVisible = ref(false)
const personComStatus = ref('add')
const personComRef = ref()
const personComData = ref({})
const handlePersonComClose = () => {
  personComVisible.value = false
}
const handlePersonComSubmit = () => {
  personComRef.value.submitForm().then((data) => {
    if (data) {
      fullscreenLoading.value = true
      if (personComStatus.value == 'add') {
        persons.value.push({
          name: data.name,
          id: persons.value.length + 1,
          money: 0,
          score: 0
        })
        personComVisible.value = false
        fullscreenLoading.value = false
      } else {
      }
    }
  })
}

//添加人员
const addPerson = () => {
  if (status.value === 0 || status.value === 2) {
    personComVisible.value = true
  } else {
    ElMessageBox.alert('请先结账再变更人员,否则会影响账单!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
  }
}

//清空人员
const emptyPerson = () => {
  if (status.value === 0 || status.value === 2) {
    persons.value = []
  } else {
    ElMessageBox.alert('请先结账再变更人员,否则会影响账单!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
  }
}

const redPersons = ref([])
const bluePersons = ref([])

const redSum = ref(0)
const blueSum = ref(0)
const editRedSum = ref(0)
const editBlueSum = ref(0)

const payLists = ref([])
// 点击胜利按钮
const victoryFun = (type) => {
  let price = money.value
  if (!validateFloatWithTwo(price)) {
    ElMessageBox.alert('输赢积分必须是数字!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
    return
  } else {
    price = Number(price)
  }

  moneyHistorys.value = [
    ...redPersons.value.map((v) => {
      return {
        name: v.name,
        money: price,
        type: type == 'red' ? '1' : '0'
      }
    }),
    ...bluePersons.value.map((v) => {
      return {
        name: v.name,
        money: price,
        type: type == 'blue' ? '1' : '0'
      }
    })
  ]

  //赢得人的id数组
  let winIds = []

  if (type == 'red') {
    winIds = redPersons.value.map((v) => v.id)
    redSum.value++
    groupHistorys.value[groupHistorys.value.length - 1].redSum++
  } else if (type == 'blue') {
    winIds = bluePersons.value.map((v) => v.id)
    blueSum.value++
    groupHistorys.value[groupHistorys.value.length - 1].blueSum++
  }

  persons.value.forEach((v, i) => {
    if (winIds.indexOf(v.id) >= 0) {
      v.money += price
    } else {
      v.money -= price
    }
  })

  //最佳支付方案
  getPayLists()

  //保存历史数据
  saveHistory(groupKey.value)
}

//获取支付方案
const getPayLists = () => {
  let labelText = ''
  payLists.value = []
  persons.value.forEach((v, i) => {
    if (v.money > 0) {
      try {
        persons.value.forEach((v2, i2) => {
          if (v.money + v2.money === 0) {
            payLists.value.push({
              winName: v.name,
              failName: v2.name,
              money: v.money,
              label: `${v2.name} 给 ${v.name} ${v.money}`
            })
            throw new Error('LoopInterrupt')
          }
        })
      } catch (e) {
        if (e.message !== 'LoopInterrupt') throw e
      }
    }
  })
}

const getGroupDetail = () => {
  console.log('获取详情!')
}

//结账
const status = ref(0) // 0 1 2
const finish = () => {
  ElMessageBox.confirm('确认结账?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      status.value = 2

      //保存历史数据
      saveHistory(groupKey.value, { status: 2 })

      const time = getNowDate()

      const rnText1 = '总账--------------\r\n'

      const moneyText = persons.value.map((v) => `${v.name} ${v.money}`).join('\r\n') + '\r\n\r\n'

      const rnText2 = '最佳支付方案--------------\r\n'

      const payText = payLists.value.map((v) => `${v.failName} 给 ${v.winName} ${v.money}`).join('\r\n\r\n') + '\r\n\r\n'

      let fileTexts = [rnText1, moneyText, rnText2, payText]

      const rnTextTip = setData.value.info.scoreName || '额外积分'
      const rnText3 = `${rnTextTip}--------------\r\n`

      const scoreText = persons.value.map((v) => `${v.name} ${v.score}`).join('\r\n\r\n') + '\r\n\r\n'

      if (setData.value.info.hasScore) {
        fileTexts = [...fileTexts, rnText3, scoreText]
      }

      if (setData.value.info.hasExport) {
        const file = new File(fileTexts, `${time}账单.txt`, { type: 'text/plain;charset=utf-8' })

        saveAs(file)
      }

      setTimeout(function () {
        payLists.value = []
        persons.value.forEach((v) => {
          v.money = 0
          v.score = 0
        })
        redPersons.value = []
        bluePersons.value = []
      }, 1000)
    })
    .catch(() => {})
}

//减少人员额外积分
const cutPersonScore = (item, index, type) => {
  let price = setData.value.info.scoreNum
  if (!validateFloatWithTwo(price)) {
    ElMessageBox.alert('输赢积分必须是数字!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
    return
  } else {
    price = Number(price)
  }

  const groupHistory = groupHistorys.value[groupHistorys.value.length - 1]
  if (type == 'red') {
    redPersons.value.forEach((v, i) => {
      if (i == index) {
        v.score -= price
      }
    })

    groupHistory.red.forEach((v, i) => {
      if (i == index) {
        v.score -= price
      }
    })
  } else if (type == 'blue') {
    bluePersons.value.forEach((v, i) => {
      if (i == index) {
        v.score -= price
      }
    })

    groupHistory.blue.forEach((v, i) => {
      if (i == index) {
        v.score -= price
      }
    })
  }

  persons.value.forEach((v, i) => {
    if (v.id == item.id) {
      v.score -= price
    }
  })

  //保存历史数据
  saveHistory(groupKey.value)
}

//添加人员额外积分
const addPersonScore = (item, index, type) => {
  let price = setData.value.info.scoreNum
  if (!validateFloatWithTwo(price)) {
    ElMessageBox.alert('输赢积分必须是数字!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
    return
  } else {
    price = Number(price)
  }
  const groupHistory = groupHistorys.value[groupHistorys.value.length - 1]
  if (type == 'red') {
    redPersons.value.forEach((v, i) => {
      if (i == index) {
        v.score += price
      }
    })

    groupHistory.red.forEach((v, i) => {
      if (i == index) {
        v.score += price
      }
    })
  } else if (type == 'blue') {
    bluePersons.value.forEach((v, i) => {
      if (i == index) {
        v.score += price
      }
    })
    console.log(bluePersons.value)

    groupHistory.blue.forEach((v, i) => {
      if (i == index) {
        v.score += price
      }
    })

    console.log(groupHistory.blue)
  }

  persons.value.forEach((v, i) => {
    if (v.id == item.id) {
      v.score += price
    }
  })

  console.log(persons.value)

  //保存历史数据
  saveHistory(groupKey.value)
}

//修改红蓝统计数
const changeSum = (val, type) => {
  if (!validateFloatWithTwo(val)) {
    ElMessageBox.alert('比分必须是数字!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
    return
  } else {
    if (type == 'red') {
      redSum.value = val
      groupHistorys.value[groupHistorys.value.length - 1].redSum = val
    } else {
      blueSum.value = val
      groupHistorys.value[groupHistorys.value.length - 1].blueSum = val
    }
  }
}

const statusArr = ['未开始', '进行中', '已结账']
const statusColors = ['color: var(--dangerColor)', 'color: var(--successColor)', 'color: var(--dangerColor)']

//全局状态文字和样式
const statusText = computed(() => {
  return statusArr[parseInt(status.value)]
})
//全局状态文字和样式
const statusStyle = computed(() => {
  return statusColors[parseInt(status.value)]
})

//本地缓存历史数据
let localHistorys = ref([])
const getLocalHistorys = () => {
  let data = getCookie('mimenHistory')
  if (data) {
    localHistorys.value = data.map((v) => {
      return {
        ...v,
        statusText: statusArr[parseInt(v.status)],
        statusStyle: statusColors[parseInt(v.status)]
      }
    })
  }
}

const historyVisible = ref(false)
const historyCur = ref([])
const historyKey = ref('')
const historyStatus = ref(0)
const historyTitle = ref('')
const historyComRef = ref()

//显示历史分组弹框
const showHistoryDiaoFun = (item) => {
  historyCur.value = item.data
  historyStatus.value = item.status
  historyTitle.value = `${item.key}总分组---(${item.statusText})`
  historyKey.value = item.key
  historyVisible.value = true
}

//隐藏历史分组弹框
const handleHistoryClose = () => {
  historyVisible.value = false
}

//导入历史分组
const handleHistorySubmit = () => {
  const historyData = historyComRef.value.submitForm()
  const { statusData, data, key } = historyData
  console.log(historyData)
  if (statusData != '1') {
    ElMessageBox.alert('只有进行中的记录才能导入!', '提示', {
      confirmButtonText: '确认',
      callback: (action) => {}
    })
    return
  }
  ElMessageBox.confirm('确定导入历史数据?这将会覆盖当前分组数据~', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: '警告'
  })
    .then(() => {
      status.value = statusData
      groupKey.value = key

      if (data && data.length > 0) {
        const result = data[data.length - 1]
        redSum.value = result.redSum
        blueSum.value = result.blueSum
        redPersons.value = JSON.parse(JSON.stringify(result.red))
        bluePersons.value = JSON.parse(JSON.stringify(result.blue))
        groupHistorys.value = JSON.parse(JSON.stringify(data))
        persons.value = JSON.parse(JSON.stringify([...result.red, ...result.blue]))

        //最佳支付方案
        getPayLists()
      }
    })
    .catch(() => {})
}

//显示隐藏历史总分组的popver弹框
const showHistoryPopover = ref(false)
const showHistoryPopoverFun = () => {
  getLocalHistorys()
  showHistoryPopover.value = !showHistoryPopover.value
}

onMounted(() => {})
</script>
<style lang="scss" scoped>
.home-box {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #343541;
  display: flex;
  justify-content: center;
  align-items: center;

  .home-content {
    width: 600px;
    height: 720px;
    padding: 35px;
    position: relative;
    box-sizing: border-box;
    background-color: #f0f0f0;
    border-radius: 3px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    .set-icon {
      position: absolute;
      right: 12px;
      top: 13px;
      font-size: 20px;
      color: #666;
      cursor: pointer;
    }

    .logo-box {
      width: 100%;
      position: absolute;
      top: -50px;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .logo {
        width: 32px;
        height: 32px;
        border-radius: 200px;
        margin-right: 10px;
      }

      .name {
        font-size: 18px;
        color: #fff;
      }
    }

    .person-box {
      width: 100%;
      height: 195px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-box {
        width: 160px;
        height: 195px;
        display: flex;
        flex-direction: column;

        .title {
          padding-bottom: 15px;
        }

        .person-list {
          flex: 1;
          border: 1px solid #828790;
          border-radius: 3px;
          padding: 10px;
          box-sizing: border-box;
          overflow-y: auto;

          .person-item {
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .score-icon {
              display: flex;
              .score {
                margin-right: 10px;
              }
            }

            .icon {
              color: #666;
              cursor: pointer;
              font-size: 16px;
            }
          }
        }
      }

      .center-box {
        width: 150px;
        height: 195px;
        // padding-top: 34px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .status-box {
          // color: var(--dangerColor);
          height: 34px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;

          .nums {
            color: #666;
            margin-right: 5px;
          }
        }

        .money-box {
          display: flex;
          align-items: center;

          .label {
            margin-right: 5px;
          }

          .el-input {
            flex: 1;
          }
        }
        .button {
          width: 100%;
          margin-left: 0;
          // margin-top: 10px;
        }
      }

      .right-box {
        width: 180px;
        height: 195px;
        display: flex;
        flex-direction: column;

        .title {
          padding-bottom: 15px;
        }

        .money-list {
          flex: 1;
          border: 1px solid #828790;
          border-radius: 3px;
          padding: 10px;
          box-sizing: border-box;
          overflow-y: auto;

          .money-item {
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            .name {
              display: flex;
              align-items: center;
              .winName {
                color: rgba(60, 29, 236, 0.938);
                margin-right: 5px;
              }

              .text {
                margin-right: 5px;
              }

              .failName {
                color: rgba(60, 29, 236, 0.938);
                margin-right: 5px;
              }

              .money {
                color: rgba(245, 83, 19, 0.938);
              }
            }

            .list-box {
              .list-item {
                margin-bottom: 3px;
              }
            }
          }

          .money-item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .group-box {
      width: 100%;
      height: 220px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .red-box,
      .blue-box {
        width: 160px;
        height: 220px;
        display: flex;
        flex-direction: column;

        .group-title {
          padding-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .num-icon {
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }

        .person-list {
          flex: 1;
          border: 1px solid #828790;
          border-radius: 3px;
          padding: 10px;
          box-sizing: border-box;
          overflow-y: auto;

          .person-item {
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .score-icon {
              display: flex;
              .score {
                margin-right: 10px;
              }
            }

            .icon {
              color: #666;
              cursor: pointer;
              font-size: 16px;
            }

            .cut {
              margin-right: 5px;
            }
          }
        }

        .button {
          margin-top: 20px;
        }
      }

      .redBlueIcon {
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(245, 83, 19, 0.938);
        font-size: 20px;
      }
    }

    .history-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      .now-box,
      .group-num-box {
        height: 184px;
        .title {
          margin-bottom: 20px;
        }

        .group-num {
          font-weight: bold;
        }
      }

      .group-num-box {
        .content {
          font-size: 16px;
        }
      }

      .group-history-box {
        margin-left: 45px;
        .title {
          margin-bottom: 20px;
        }

        .group-history {
          width: 230px;
          height: 150px;
          padding: 10px;
          box-sizing: border-box;
          border: 1px solid #828790;
          border-radius: 3px;
          overflow-y: auto;

          .group-history-item {
            margin-bottom: 5px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
}

.sum {
  font-size: 16px;
  font-weight: bold;
}

.sum.redSum {
  color: rgba(245, 83, 19, 0.938);
}

.sum.blueSum {
  color: rgba(60, 29, 236, 0.938);
}

.set-content {
  .title {
    margin-bottom: 10px;
    font-weight: bold;
  }
  .form-box {
    margin-bottom: 20px;
    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .label {
      }

      .value {
      }
    }
  }
}

.bottom-box {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  color: #fff;
  cursor: pointer;
}

.util-box {
  width: 70px;
  border-radius: 8px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  position: fixed;
  left: 5px;
  top: 40%;
  transform: translateY(-50%);
  padding: 10px;
  box-sizing: border-box;

  .util-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;

    .icon {
      font-size: 20px;
    }

    .history.icon {
      color: rgb(255, 207, 0);
    }
  }

  .util-item:last-child {
    margin-bottom: 0;
  }
}
</style>
<style lang="scss">
.group-history-item-popover {
  display: flex;
  justify-content: space-between;
  padding: 20px;

  .history-red {
    .title {
      font-size: 18px;
      color: rgba(245, 83, 19, 0.938);
      font-weight: bold;
      margin-bottom: 10px;
    }
  }

  .history-blue {
    .title {
      font-size: 18px;
      color: rgba(60, 29, 236, 0.938);
      font-weight: bold;
      margin-bottom: 10px;
    }
  }

  .person-list {
    .person-item {
      margin-bottom: 5px;
      display: flex;

      .name {
        margin-right: 20px;
      }

      .money {
        margin-right: 20px;
      }
    }
  }
}

.local-history {
  .history-item {
    margin-bottom: 10px;
    cursor: pointer;
  }
  .history-item:last-child {
    margin-bottom: 0;
  }
}
</style>
